<template>
  <div class="app-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>借款申请审批管理</h2>
      <p>管理所有借款申请的审批流程和状态</p>
    </div>

    <!-- 列表卡片 -->
    <div class="card-container">
      <el-table
        :data="list"
        stripe
        border
        :header-cell-style="headerStyle"
        :row-class-name="tableRowClassName"
        @row-hover="handleRowHover"
      >
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="name" label="借款人姓名" width="120" />
        <el-table-column prop="mobile" label="手机" />
        <el-table-column prop="amount" label="借款金额" />
        <el-table-column label="借款期限" width="100">
          <template slot-scope="scope">{{ scope.row.period }}个月</template>
        </el-table-column>
        <el-table-column prop="param.returnMethod" label="还款方式" width="150" />
        <el-table-column prop="param.moneyUse" label="资金用途" width="120" />
        <el-table-column label="年化利率" width="110">
          <template slot-scope="scope">
            <span :class="getRateClass(scope.row.borrowYearRate)">{{ scope.row.borrowYearRate * 100 }}%</span>
          </template>
        </el-table-column>
        <el-table-column prop="param.status" label="状态" width="110">
          <template slot-scope="scope">
            <el-tag :type="getStatusTagType(scope.row.param.status)">
              {{ scope.row.param.status }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="申请时间" width="160" />

        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              class="operation-btn view-btn"
            >
              <router-link :to="'/core/borrower/info-detail/' + scope.row.id">
                查看
              </router-link>
            </el-button>

            <el-button
              v-if="scope.row.status === 1"
              type="warning"
              size="mini"
              class="operation-btn approve-btn"
              @click="approvalShow(scope.row)"
            >
              审批
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 审批对话框 -->
    <el-dialog
      title="借款申请审批"
      :visible.sync="dialogVisible"
      width="520px"
      :before-close="handleDialogClose"
      custom-class="approval-dialog"
    >
      <el-form
        label-position="right"
        label-width="100px"
        :model="borrowInfoApproval"
        ref="approvalForm"
        :rules="formRules"
      >
        <el-form-item label="是否通过" prop="status">
          <el-radio-group v-model="borrowInfoApproval.status" @change="handleStatusChange">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="-1">不通过</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          v-if="borrowInfoApproval.status == 2"
          label="标的名称"
          prop="title"
        >
          <el-input
            v-model="borrowInfoApproval.title"
            placeholder="请输入标的名称"
            clearable
          />
        </el-form-item>

        <el-form-item
          v-if="borrowInfoApproval.status == 2"
          label="起息日"
          prop="lendStartDate"
        >
          <el-date-picker
            v-model="borrowInfoApproval.lendStartDate"
            type="date"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          />
        </el-form-item>

        <el-form-item
          v-if="borrowInfoApproval.status == 2"
          label="年化收益率"
          prop="lendYearRate"
        >
          <el-input
            v-model="borrowInfoApproval.lendYearRate"
            placeholder="请输入年化收益率"
            type="number"
            min="0"
            step="0.01"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>

        <el-form-item
          v-if="borrowInfoApproval.status == 2"
          label="服务费率"
          prop="serviceRate"
        >
          <el-input
            v-model="borrowInfoApproval.serviceRate"
            placeholder="请输入服务费率"
            type="number"
            min="0"
            step="0.01"
          >
            <template slot="append">%</template>
          </el-input>
        </el-form-item>

        <el-form-item
          v-if="borrowInfoApproval.status == 2"
          label="标的描述"
          prop="lendInfo"
        >
          <el-input
            v-model="borrowInfoApproval.lendInfo"
            type="textarea"
            rows="4"
            placeholder="请输入标的描述信息"
          />
        </el-form-item>

        <el-form-item
          v-if="borrowInfoApproval.status == -1"
          label="拒绝原因"
          prop="refuseReason"
        >
          <el-input
            v-model="borrowInfoApproval.refuseReason"
            type="textarea"
            rows="4"
            placeholder="请输入拒绝原因"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="approvalSubmit"
          :loading="submitLoading"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import borrowInfoApi from '@/api/core/borrow-info'

export default {
  data() {
    return {
      list: [],
      dialogVisible: false, // 审批对话框显示状态
      submitLoading: false, // 提交按钮加载状态
      borrowInfoApproval: {
        status: 2,
        serviceRate: 5,
        lendYearRate: 0,
        id: null,
        title: '',
        lendStartDate: '',
        lendInfo: '',
        refuseReason: ''
      }, // 审批对象
      formRules: {
        status: [
          { required: true, message: '请选择是否通过', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入标的名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        lendStartDate: [
          { required: true, message: '请选择起息日', trigger: 'change' }
        ],
        lendYearRate: [
          { required: true, message: '请输入年化收益率', trigger: 'blur' },
          { type: 'number', min: 0.01, message: '年化收益率必须大于0', trigger: 'blur' }
        ],
        serviceRate: [
          { required: true, message: '请输入服务费率', trigger: 'blur' },
          { type: 'number', min: 0, message: '服务费率不能为负数', trigger: 'blur' }
        ],
        lendInfo: [
          { required: true, message: '请输入标的描述', trigger: 'blur' },
          { min: 10, max: 500, message: '长度在 10 到 500 个字符', trigger: 'blur' }
        ],
        refuseReason: [
          { required: true, message: '请输入拒绝原因', trigger: 'blur' },
          { min: 5, max: 500, message: '长度在 5 到 500 个字符', trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    this.fetchData()
  },

  methods: {
    // 获取数据列表
    fetchData() {
      this.$loading({
        lock: true,
        text: '加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      borrowInfoApi.getList().then(response => {
        this.list = response.data.list
        this.$loading().close()
      }).catch(() => {
        this.$loading().close()
        this.$message.error('数据加载失败')
      })
    },

    // 显示审批对话框
    approvalShow(row) {
      this.dialogVisible = true
      // 重置表单
      this.$nextTick(() => {
        this.$refs.approvalForm.resetFields()
      })
      // 初始化数据
      this.borrowInfoApproval = {
        id: row.id,
        status: 2,
        serviceRate: 5,
        lendYearRate: row.borrowYearRate * 100,
        title: '',
        lendStartDate: '',
        lendInfo: '',
        refuseReason: ''
      }
    },

    // 提交审批
    approvalSubmit() {
      this.$refs.approvalForm.validate(valid => {
        if (valid) {
          this.submitLoading = true
          borrowInfoApi.approval(this.borrowInfoApproval)
            .then(response => {
              this.submitLoading = false
              this.dialogVisible = false
              this.$message.success(response.message)
              this.fetchData()
            })
            .catch(error => {
              this.submitLoading = false
              this.$message.error(error.message || '审批提交失败')
            })
        }
      })
    },

    // 处理对话框关闭
    handleDialogClose() {
      this.$refs.approvalForm.resetFields()
      this.dialogVisible = false
    },

    // 处理状态变更
    handleStatusChange() {
      // 当状态变更时重置相关字段
      if (this.borrowInfoApproval.status === 2) {
        this.borrowInfoApproval.refuseReason = ''
      } else {
        this.borrowInfoApproval.title = ''
        this.borrowInfoApproval.lendStartDate = ''
        this.borrowInfoApproval.lendYearRate = 0
        this.borrowInfoApproval.serviceRate = 5
        this.borrowInfoApproval.lendInfo = ''
      }
    },

    // 获取状态标签类型
    getStatusTagType(status) {
      switch(status) {
        case '待审批':
          return 'info'
        case '已通过':
          return 'success'
        case '已拒绝':
          return 'danger'
        default:
          return 'warning'
      }
    },

    // 获取利率样式类
    getRateClass(rate) {
      const value = rate * 100
      if (value > 10) return 'high-rate'
      if (value > 5) return 'medium-rate'
      return 'low-rate'
    },

    // 表格行悬停处理
    handleRowHover(row, column, event) {
      // 可以添加行悬停时的额外处理
    },

    // 表格行样式
    tableRowClassName({row, rowIndex}) {
      return 'table-row'
    }
  },

  computed: {
    // 表格头部样式
    headerStyle() {
      return {
        'background-color': '#f5f7fa',
        'font-weight': 'bold',
        'color': '#303133'
      }
    }
  }
}
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f2f3f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.page-header h2 {
  margin: 0 0 10px 0;
  color: #1f2329;
  font-size: 18px;
}

.page-header p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}

.card-container {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-container:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
}

::v-deep .el-table {
  border: none;
}

::v-deep .el-table th {
  border-bottom: 1px solid #e5e6eb;
}

::v-deep .el-table tr {
  transition: background-color 0.2s ease;
}

::v-deep .el-table tr:hover td {
  background-color: #f7f8fa !important;
}

::v-deep .el-table__empty-block {
  min-height: 200px;
}

.operation-btn {
  margin-right: 5px;
  transition: all 0.2s ease;
}

.operation-btn:last-child {
  margin-right: 0;
}

.view-btn {
  background-color: #409eff;
  border-color: #409eff;
}

.view-btn:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

.approve-btn {
  background-color: #e6a23c;
  border-color: #e6a23c;
}

.approve-btn:hover {
  background-color: #f3b75f;
  border-color: #f3b75f;
}

.approval-dialog ::v-deep .el-dialog__header {
  padding: 18px 20px;
  border-bottom: 1px solid #e5e6eb;
}

.approval-dialog ::v-deep .el-dialog__title {
  font-size: 16px;
  color: #1f2329;
}

.approval-dialog ::v-deep .el-dialog__body {
  padding: 20px;
}

.approval-dialog ::v-deep .el-form-item {
  margin-bottom: 18px;
}

.dialog-footer {
  padding: 12px 20px;
  border-top: 1px solid #e5e6eb;
  text-align: right;
}

::v-deep .el-tag {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.high-rate {
  color: #f56c6c;
  font-weight: 500;
}

.medium-rate {
  color: #e6a23c;
  font-weight: 500;
}

.low-rate {
  color: #67c23a;
  font-weight: 500;
}

.table-row {
  height: 50px;
}
</style>
